<template>
<div class="houseList">
  <!-- 头部tab -->
  <div class="header-wrap">
    <span class="header-wrap-left"  @click="goback">
      <i class="iconback iconfont icon-fanhui"></i>
    </span>
    <span class="header-wrap-text">公寓</span>
    <span class="header-wrap-right">
    </span>
  </div>
  <div class="houseList-box">
    <div class="houseList-content" v-for="(list,index) in Notice" :key="index">
      <div class='noticeSwiper-img-box' @click="goswiperlist(index)">
        <img class="noticeSwiper-img" :src="list.imgSrc" alt="">
      </div>
      <div class="noticeSwiper-content">
        <div class="noticeSwiper-list">
          <span class="noticeSwiper-tittle">{{list.title}}</span>
          <div class="noticeSwiper-price">
            <span>{{list.number}}</span>
            <span>{{list.time}}</span>
          </div>
        </div>
      </div>   
    </div>
  </div>
</div>
</template>
<script>
export default {
  data(){
    return{
      Notice : [
        {
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'公寓',
          time:'1000元',
          number: '某某3小区'
        },
        {
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'商铺',
          time:'1000元',
          number:'某某2小区'
        },
        {
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'哈哈哈',
          time:'1000元',
          number:'某某1小区'
        }
      ],
    }
  },
  methods:{
    goback(){
      this.$router.go(-1)
    },
    goswiperlist(){
      this.$router.push('/houseDetail')
    }
  },
  components:{
  }
}
</script>
<style scoped>
.houseList-box{
  padding-top: 1.5rem;
}
.houseList{
  background: #2e294e;
  margin:0 .3rem;
}
.houseList-content{
  margin-bottom: .35rem;
  height: 7.2rem;
}
.noticeSwiper{
  padding-bottom: 3rem;
  width: 100%;
  height: auto;
}
.noticeSwiper-img-box{
  width: 100%;
  height: 78%;
  overflow: hidden;
  border-radius: .2rem .2rem 0 0;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem .2rem 0 0;
}
.swiper-slide{
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  border-radius: 0 0 .2rem .2rem;
  height: 22%;
  background: #423f72;
}
.noticeSwiper-list{
  margin-left: .28rem;
}
.noticeSwiper-tittle{
  font-size: .32rem;
  display: block;
  padding-top: .3rem;
  width: 88%;
  height: .35rem;
  line-height: .35rem;
  color: #fff;
}
.noticeSwiper-price{
  display: flex;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  margin: .2rem 0;
  color: #ee5a8a;
}
.noticeSwiper-price span{
  flex: 1;
}
.noticeSwiper-price span:nth-of-type(1){
  color: #57c5c6;
}
.noticeSwiper-rate{
  display: flex;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .3rem;
  height: .3rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .25rem;
}
</style>

